<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN""DTD/xhtml1-strict.dtd">
<%@page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<%@taglib uri="/WEB-INF/c.tld" prefix="c"%>
<%@taglib uri="/WEB-INF/fmt.tld" prefix="fmt"%>
<%@taglib uri="/WEB-INF/fn.tld" prefix="fn"%>
<%@taglib uri="/WEB-INF/el.tld" prefix="el"%>
<html>
	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
		<c:import url="/includes/css_inc.jsp"/>
		<c:import url="/includes/js_inc.jsp"/>
		<script>
			$(function(){
				$("#btnSearch").button({
		            icons: {
		                primary: "ui-icon-search"
		            }
		        }).click(function(){
					if(validateEmpty()){
		        		$("#searchForm").submit();
					}
		        });
				$("#btnExport").button({
		            icons: {
		                primary: "ui-icon-arrowthickstop-1-s"
		            }
				}).click(function(){
					if(validateEmpty()){
						window.location='${pageContext.request.contextPath}/acc6?app=ACC60402&job=export&budgetYear='+$("#budgetYear").val()+'&provinceId='+$("#provinceId").val()+'&allocateCode='+$("#allocateCode").val()+'&allocateCodeLvl2='+$("#allocateCodeLvl2").val();
					}	
				});
				$("#budgetYear").change(function(){
					document.getElementById("allocateCode").innerHTML = "";
					var dhtml = new DHTML();
					if($("#budgetYear").val() != ""){
						$.ajax({
							type: "post",
							url: "/provacc/acc67",
							dataType: "json",
							async: false,
						    cache: false,
							data: {
								app: "ajax",
								job: "getAllocateLvl1",
								budgetYear: $("#budgetYear").val()
							},
							success: function(data) {
								if(data.length > 0){
									dhtml.createElement(document.getElementById("allocateCode"), ["option","value="], "----- เลือก -----");
									for(var i=0;i<data.length;i++){
										dhtml.createElement(document.getElementById("allocateCode"), ["option","value="+data[i].code], data[i].code +" - "+ data[i].name);
									}
								}else{
									dhtml.createElement(document.getElementById("allocateCode"), ["option","value="], "----- เลือก -----");
									return false;
								}
							}
						});
					}
				});
				$("#allocateCode").change(function(){
					document.getElementById("allocateCodeLvl2").innerHTML = "";
					var dhtml = new DHTML();
					if($("#allocateCode").val() != ""){
						$.ajax({
							type: "post",
							url: "/provacc/acc67",
							dataType: "json",
							async: false,
						    cache: false,
							data: {
								app: "ajax",
								job: "getAllocateLvl2",
								budgetYear: $("#budgetYear").val(),
								allocateCode: $("#allocateCode").val()
							},
							success: function(data) {
								if(data.length > 0){
									dhtml.createElement(document.getElementById("allocateCodeLvl2"), ["option","value="], "----- เลือก -----");
									for(var i=0;i<data.length;i++){
										dhtml.createElement(document.getElementById("allocateCodeLvl2"), ["option","value="+data[i].code], data[i].code +" - "+ data[i].name);
									}
								}else{
									dhtml.createElement(document.getElementById("allocateCodeLvl2"), ["option","value="], "----- เลือก -----");
									return false;
								}
							}
						});
					}
				});
			});
		</script>
	</head>
	<body>
		<c:import url="/apps/msg.jsp"/>
		<form class="acc67-form" name="searchForm" id="searchForm" action="${pageContext.request.contextPath}/acc6" method="post">
		<input type="hidden" name="app" id="app" value="ACC60402"/>
		<input type="hidden" name="job" id="job" value="search"/>
		<table width="100%" class="ui-widget ui-widget-content" border="0">
			<tr>
				<th align="left" class="acc67-header ui-widget-header" colspan="2"><b>${screenCode.ACC60402}</b></th>
			</tr>
			<tr>
				<td class="bold">จังหวัด : </td>
				<td>
					<c:if test="${userInfo.areaLevel =='3'}">
						<c:forEach var="data" items="${userInfo.listUserProvice}">
							${data.provinceName}
							<input type="hidden" name="provinceId" id="provinceId" value="${data.provinceId}">
						</c:forEach>
					</c:if>
					<c:if test="${userInfo.areaLevel=='1' || userInfo.areaLevel=='2'}">
						<select name="provinceId" id="provinceId">
							<option value="">เลือกทั้งหมด</option>
							<c:forEach var="data" items="${userInfo.listUserProvice}">
								<c:if test="${data.provinceId == provinceId}" var="provinceSeleted"/>
								<option value="${data.provinceId}" ${provinceSeleted?'selected':''}>${data.provinceName}</option>
							</c:forEach>
						</select>
						<!-- <span id="$provinceId" class="red">*</span> -->
					</c:if>
				</td>
			</tr>
			<tr>
				<td width="20%" class="bold">ปีงบประมาณ: </td>
				<td>
					<select name="budgetYear" id="budgetYear">
						<option value="">----- เลือก -----</option>
						<c:forEach items="${lsBudgetYear}" var="data">
							<c:if test="${budgetYear == data.BUDGET_YEAR}" var="selected"/>
							<option value="${data.BUDGET_YEAR}" ${selected?'selected':''}>${data.BUDGET_YEAR}</option>
						</c:forEach>
					</select>
					<span id="$budgetYear" class="red">*</span>
				</td>
			</tr>
			<tr>
				<td class="bold">กองทุน : </td>
				<td>
					<select name="allocateCode" id="allocateCode">
						<option value="">----- เลือก -----</option>
						<c:if test="${!empty lsAllocateLvl1}">
							<c:forEach items="${lsAllocateLvl1}" var="dataLvl1">
								<c:if test="${allocateCode == dataLvl1.ALLOCATE_CODE}" var="selected"/>
								<option value="${dataLvl1.ALLOCATE_CODE}" ${selected?'selected':''}>${dataLvl1.ALLOCATE_CODE} - ${dataLvl1.ALLOCATE_NAME}</option>
							</c:forEach>
						</c:if>
					</select>
					<span id="$allocateCode" class="red">*</span>
				</td>
			</tr>
			<tr>
				<td></td>
				<td>
					<select name="allocateCodeLvl2" id="allocateCodeLvl2">
						<option value="">----- เลือก -----</option>
						<c:if test="${!empty lsAllocateLvl2}">
							<c:forEach items="${lsAllocateLvl2}" var="dataLvl2">
								<c:if test="${allocateCodeLvl2 == dataLvl2.ALLOCATE_CODE}" var="selected"/>
								<option value="${dataLvl2.ALLOCATE_CODE}" ${selected?'selected':''}>${dataLvl2.ALLOCATE_CODE} - ${dataLvl2.ALLOCATE_NAME}</option>
							</c:forEach>
						</c:if>
					</select>
				</td>
			</tr>
			<tr>
				<td align="center" colspan="2">
					<button type="button" name="btnSearch" id="btnSearch" class="acc67-button"> ค้นหาข้อมูล </button>
					<button type="button" name="btnExport" id="btnExport" class="acc67-button"> Download </button>
				</td>
			</tr>
		</table>
		<br/>
		<c:if test="${!empty listData}">
			<fieldset>
				<legend> รายงานยอดสรุปบัญชีแต่ละจังหวัด ตามปีงบประมาณ </legend>
				<br/>
					<b class="red"> * รายงานนี้เป็นรายงานที่รวมจำนวนภาษีหัก ณ ที่จ่ายแล้ว</b>
				<br/>
					<b>จังหวัด : ${provinceName}</b>
				<br/>
					<b>${allocateCode} : ${allocateName}</b>	
				<br/>
					<table width="100%" class="acc67-grid ui-widget ui-widget-content" border="0">
						<tr>
							<th align="center" class="ui-state-default">วันที่</th>
							<th align="center" class="ui-state-default">เลขที่เอกสาร</th>
							<th align="center" class="ui-state-default">เลขที่อ้างอิง</th>
							<th align="center" class="ui-state-default">รหัสโอนเงินคู่สัญญา</th>
							<th align="center" class="ui-state-default">ชื่อกองทุน</th>
							<th align="center" class="ui-state-default">รายการ</th>
							<th align="center" class="ui-state-default">รายรับ</th>
							<th align="center" class="ui-state-default">รายจ่าย</th>
							<th align="center" class="ui-state-default">คงเหลือ</th>
						</tr>
						<c:set var="remain" value="0" />
						<c:forEach items="${listData}" var="data" varStatus="x">
							<c:if test="${data.level == '1'}">
								<tr class="grid-tr-lvl1">
							</c:if>
							<c:if test="${data.level == '2'}">
								<tr class="grid-tr-lvl2">
							</c:if>
							<c:if test="${data.level == '3'}">
								<c:if test="${empty data.date || empty data.docNo || empty data.refNo}">
									<tr class="grid-tr-lvl3-head">
								</c:if>
								<c:if test="${!empty data.date || !empty data.docNo || !empty data.refNo}">
									<tr class="grid-tr-${x.count % 2}">
								</c:if>
							</c:if>
								<td align="center">${el:dateTh(data.date)}</td>
								<td align="center">${data.docNo}</td>
								<td align="center">${data.refNo}</td>
								<td align="left">${data.code}</td>
								<td align="left">${data.name}</td>
								<td align="left">${data.desc}</td>
								<td align="right"><fmt:formatNumber pattern="#,##0.00" value="${data.I}" /></td>
								<td align="right"><fmt:formatNumber pattern="#,##0.00" value="${data.X}" /></td>
								<c:if test="${data.R != '0'}">
									<td align="right"><fmt:formatNumber pattern="#,##0.00" value="${data.R}" /></td>
									<c:set var="remain" value="0" />
								</c:if>
								<c:if test="${data.R == '0'}">
									<%-- 
									<c:if test="${data.I != '0'}">
										<td align="right">
											<fmt:formatNumber  pattern="#,##0.00" value="${data.I + remain}" />
										</td>
									</c:if>
									<c:if test="${data.X != '0'}">
										<td align="right">
											<fmt:formatNumber  pattern="#,##0.00" value="${remain - data.X}" />
										</td>
									</c:if> --%>
									<td align="right">
										<c:set var="issum" value="Y" />
										<c:if test="${data.I == '0' && data.X == '0'}">
											<c:set var="issum" value="N" />
										</c:if>
										<c:if test="${issum == 'Y'}">
											<fmt:formatNumber  pattern="#,##0.00" value="${remain + (data.I - data.X)}" />
											<c:set var="remain" value="${remain + (data.I - data.X)}" />
										</c:if>
										<c:if test="${issum == 'N'}">
											0.00
										</c:if>
									</td>
								</c:if>
							</tr>
						</c:forEach>
					</table>
			</fieldset>
		</c:if>
		</form>
	</body>
</html>